<template>
  <div class="mian" id="bodyBox">
    <div><HeaderPublc></HeaderPublc></div>
    <div class="leftBox" style="margin-top: 1px">
       <div class="">
         <section id="list" >
           <div class="">
             <div class="left" style="line-height: 0rem"><span class="now bread" >当前位置: </span></div>
             <div class="left">
               <el-breadcrumb separator-class="el-icon-arrow-right" >
                 <el-breadcrumb-item :to="{ path: '/' }"><span class="bread"> 首页</span></el-breadcrumb-item>
                 <el-breadcrumb-item  ><span class="bread in">订单搜索</span></el-breadcrumb-item>
               </el-breadcrumb>
             </div>
             <div class="left" style="position: absolute;right:5px;top: 5px">
               <el-button  size="small" @click="checkMap('here')">here地图</el-button>
               <el-button  size="small"  @click="checkMap('baidu')">百度地图</el-button>
               <el-button  size="small"  @click="checkMap('google')">google地图</el-button>
             </div>
           <div class="cleae" style="padding-top:.20rem;line-height: 0rem ">
             <el-input class="saechIput left"   v-model="input" :placeholder="languageData.public.sechText" ></el-input>
             <span type=""   class="saechBout left " @click="sechlistFn"> <img src="../../../../static/img/seach.png" /></span>
             <p class="cleae" :transport="transport"></p>
           </div>
           </div>
           <div class="listTop" v-show="ULlist.first.location" :mapLi="mapLi">
             <div>
               <!-- 起点 -->
               <p><span class="iconFrom">起</span> <span class="text">{{ dataChart.startPosition.CN}}</span></p>
               <!-- 终点 -->
               <p><span class="icon"><img src="../../../../static/img/go.png" height="30" width="16"/></span> </p>
               <!-- 终点 -->
               <p><span class="iconTo">终</span> <span class="text">{{dataChart.endPosition.CN}}</span></p>
             </div>
           </div>
           <div class="listCent">
             <div class="listBoder"  v-show="ULlist.first.location">
               <div  class="first padding" v-show="ULlist.first.location">
                 <p @click="updateMap(ULlist.first)">{{ULlist.first.location}}</p><i class="time margin-5" >{{ULlist.first.ymd}} {{ULlist.first.hms}}</i>
                 <div class="ricBoder">
                   <div class="ric"></div>
                 </div>
               </div>
             </div>
             <div class="aimintUl" id="aimintUl">
               <div class="listBoder">
                   <div   class="UlBox " >
                     <ul id="ul" class="padding" v-show="ULlist.list.length>0 ">
                       <li v-for="list in ULlist.list"  @click="updateMap(list)">
                         <p>{{list.location}}</p><i class="time">{{list.ymd}} {{list.hms}}</i>
                         <div class="ricM"></div>
                       </li>
                     </ul>
                   </div>
               </div>
             </div>
             <div class="listBoder">
               <div class="next padding" v-show="ULlist.listCnut>2"><span style="margin-left: 5px">{{clickText}}</span> <span :class="{'el-icon-arrow-up':clickStatus,'el-icon-arrow-down':!clickStatus}" v-on:click="opentList()"></span> </div>
               <div  class="last padding" v-on:click="updateMap(ULlist.last)"  v-show="ULlist.last.location">
                 <p class="">{{ULlist.last.location}}</p> <i class="time margin-5" >{{ULlist.last.ymd}} {{ULlist.last.hms}}</i>
                 <div class="ricBoder" >
                   <div class="ric"></div>
                 </div>
               </div>
             </div>
             <p v-show="!ULlist.first.location" style="text-align: center;margin-top: 40px">{{errorText}}</p>
           </div>
         </section>
       </div>
    </div>
    <div class="container">
      <div class="main" id="map" >

      </div>
    </div>
    <div>
      <myfooter>
      </myfooter>
    </div>
  </div>
</template>
<style scoped>
   #map{height: 100%;cursor: pointer}

   .mian{background-color: #fff}
   #bodyBox .in{color: #0062a2}
   #bodyBox .bread{font-size:.16rem;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-weight: normal}
   .mian .container{height: 800px;background: #ecf0f1; margin-left: 360px}
  .mian .container .aside{width: auto;height: 100%;float: left;background: #545c64;margin-right: 20px;}
   footer{width: 100%;clear: both }
   .margin-5{right: 5px}
  .mian .container .main{}
  .mian .container .show .main{}
   body{background-color:#f7f7f7}
  .work{margin-bottom:20px;background-color:#fff}
  .workTitle{width: 100%;height: 160px;background-color: #429cd5}
  .workTitle p{text-align: center;line-height:160px;color: #fff;font-size: 24px;font-weight: bold}
  p {text-align: left}
  .leftBox{float: left;min-width:360px;  width: 4.48rem;background-color: #fff;position: relative;z-index: 100000}
   .listBox{overflow-y: scroll;height:300px; background-color: #fff;width: 325px;border: 1px solid #e1e1e1;margin-top: 10px;padding:10px 0px; position: relative; z-index: 1000;}
   .list{ cursor: pointer;padding-top: 5px;padding-bottom: 5px;}
   #list{ min-width:325px; width: 90%; height: auto; margin: auto; background-color: #fff; margin-top: 40px; padding: 10px;}
   #list p{font-size: 14px;text-align: left;line-height: 30px;}
   .listTop{ position: relative;padding: .37rem .1rem .4rem .1rem; }
   .bot{display: block; width: 40px;height: 20px;border: 1px solid #ccc;position: absolute; text-align: center;font-size: 12px;line-height: 20px;top: 10px;right: 10px;cursor: pointer}
   .listCent{padding: 10px 20px 10px 0px;padding-right: 0px;}
   .listCent p{line-height: 20px;}
   .next span{ font-size: 12px;cursor: pointer;color: #999}
   .ricBoder{ width: 10px;height: 20px;display: block;position: absolute;top: 0px;left: -1px;background: #fff}
   .ric{ width: 11px;height: 11px;border-radius:6px;border: 1px solid #ccc;display: block;position: absolute;top: 7px;left: -6px;background: #fff}
   .ricM{ width: 9px;height: 9px;border-radius:6px;border: 1px solid #ccc;display: block;position: absolute;top: 7px;left: -16px;background: #fff}
   .padding{padding-left: 10px; border-left:1px solid #ccc ;height: 100%}
   .first{ position: relative; }
   .first p{ line-height: 30px;font-weight: bold;cursor: pointer;width:176px}
   .last p{ line-height: 30px;font-weight: bold;cursor: pointer; width:176px}
   .last p:hover{ color: #409eff}
   .first p:hover{ color: #409eff}
   .last{ position: relative;border:0px none}
   .last .ricBoder{ border-left: 1px solid #ccc;left: 0px}
   .last .ric{ border-left: 1px solid #ccc;left: -7px}
   li{position: relative;padding: 5px;}
   #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 166px; }
   #list li p:hover{ color: #409eff}
   .aimintUl{width: 100%;overflow: hidden;height: 0px}
   .listBoder{padding-left: 20px;height: 100%;}
   .UlBox{padding-left: 20px;position: relative;left: -20px;width: 325px;height:auto;}
   ul{ padding: 5px;padding-bottom: 0px;height:100%;width: 270px}
   .next{ width:120px;text-align: left;font-size: 12px;color: #999;padding-bottom: 5px;padding-left:10px;}
   .listFooter{padding-top: 13px;}
   .time{font-size: 12px;position: absolute;right: 17px;top: 10px;}
   .aimintUl .time{right: 0px;top: 10px;}
   /*#saechFirst{ width: 100%;height: 100%;margin: auto;background-color:rgba(255,250,250,0.8);position:fixed;top: 50px;left: 0px; z-index: 101}*/
  .iconFrom{padding: 4px 5px ;font-size: 12px; color: #fff;background: #1d74ad;border-radius: 20px;margin-right: 10px}
  .iconTo{padding: 4px 5px ;font-size: 12px; color: #fff;background: #fd8d00;border-radius: 20px;margin-right: 10px}
  .text{font-size: 17px;font-weight: bold;line-height: 25px;position: relative;top: 4px;color: #333}
  .icon img{ margin-top: 10px;margin-left: 3px}
  .now{padding-bottom: 25px;display: block; width: 80px;height: 14px;line-height: 14px;font-size: 14px;margin-right: 10px}
  .saechIput{width:200px;background-color: #fafafa}
  .saechBout{ display: block;width:  25px;height:  25px; padding: 7px ;margin-left: 10px; border: 1px solid #e1e1e1;border-radius: 4px;cursor: pointer;line-height:10px;background-color: #fafafa}
   .saechBout img{width: 25px;height: 25px ;position: relative;}

   @media only screen and (min-width: 1200px){
     .mian .container{height: 800px;background: #ecf0f1; margin-left: 360px}
     .leftBox{float: left;  width: 360px;background-color: #fff;position: relative;z-index: 100000}
     .text{ font-size: 17px}
     #list #ul{width: 270px}
   }
   @media only screen and (min-width: 1400px){
     .mian .container{height: 800px;background: #ecf0f1; margin-left: 380px}
     .leftBox{float: left;  width: 380px;background-color: #fff;position: relative;z-index: 100000}
     . #list{ width: 345px}
     .text{ font-size: 18px}
     .saechIput{width:290px}
     #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 191px; }
     .first p{ width:191px}
     .last p{  width:191px}
     .UlBox{width: 335px}
     .margin-5{right: 10px}
     .UlBox .time{right: 20px}
     #list #ul{width: 310px}
   }
   @media only screen and (min-width: 1600px){
     .mian .container{height: 800px;background: #ecf0f1; margin-left: 400px}
     .leftBox{float: left;  width: 400px;background-color: #fff;position: relative;z-index: 100000}
     . #list{ width: 365px}
     .text{ font-size: 19px}
     #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 200px; }
     .text{ font-size: 20px}
     .saechIput{width:305px}
     .first p{ width:200px}
     .last p{  width:200px}
     .UlBox{width: 340px}
     .margin-5{right: 20px}
     .UlBox .time{right: 20px}
     #list #ul{width: 328px}
   }
   @media only screen and (min-width: 1920px){
     .mian .container{height: 800px;background: #ecf0f1; margin-left: 448px}
     .leftBox{float: left;  width: 448px;background-color: #fff;position: relative;z-index: 100000}
     #list{ width: 415px}
     .text{ font-size: 23px}
     .saechIput{width:345px}
      #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 250px; }
     .first p{ width:250px}
     .last p{  width:250px}
     .UlBox{width: 395px}
     .margin-5{right: 25px}
     .UlBox .time{right: 25px}
     #list #ul{width: 381px}
   }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import cent from '@/components/lanwan/pager/company.vue'
  import myfooter from '@/components/public/footer.vue'
  import {mapState, mapActions} from 'vuex'
  import jsonData from '../../../../static/local'
  export default {
    name: 'my-adminChart',
    beforeCreate () {
      this.$store.commit('transportListTo', null)
    },
    data () {

      return {
        input:'',
        list2: [],
        mapType:'google',
        ULlist: {
          first: {
            lat: null, // 经度
            lng: null, // 纬度
            ymd: null,   // 日期
            hms: null,   // 时间
            location: null // 地址信息
          }, // 开始地址
          list: [],   // 中间地址
          last: {
            lat: null, // 经度
            lng: null, // 纬度
            ymd: null,   // 日期
            hms: null,   // 时间
            location: null // 地址信息
          }, //  第二次地址
          listCnut: null
        },
        dataChart: {
          startPosition:{code:'',EN:'',CN:''},
          endPosition:{code:'',EN:'',CN:''}
        },
        clickText:'',
        clickStatus:'',
        // 地图参数
        map: null,
        mapDate: null,
        platform: null,
        behavior: null,
        defaultLayers: null,
        ui: null,
        index:0,
        points:[],
        polylineList:[],
        infowindow:null
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        checkID: 'checkId',
        mapListpost: 'mapListFn'
      }),
      //地图选择
      checkMap(a){
        this.mapType = a
        this.map= null
        this.sev()
        this.index=0,
        this.points=[],
        this.polylineList=[]
        this.bubble=null
        this.sechlistFn()
      },
      /**
       * here地图
       */
      // 地图渲染
      mapFn (map, parm) {
        if(this.mapType=='here'){
          if (parm) {
            map.setCenter({lat: parm.lat, lng: parm.lng})
          } else {
            map.setCenter({lat: 116.404, lng: 39.915})
          }
          map.setZoom(13)
          map.setBaseLayer(this.defaultLayers.normal.traffic)
        }
        if(this.mapType=='baidu'){
          var point
          if (parm) {
             point = new BMap.Point(parm.lng, parm.lat);
          } else {
             point = new BMap.Point(116.404, 39.915);
          }
           // 创建点坐标
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
        }
        if(this.mapType=='google'){
          var point
          if (parm) {
            point =  new google.maps.LatLng(parm.lat, parm.lng);
          } else {
            point = new google.maps.LatLng(39.915,116.404);
          }
          var mapProp = {
            center:point,
            zoom:4,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
         this.map = new google.maps.Map(document.getElementById("map"), mapProp);
        }
      },
      // 链接地图服务器 here地图
      mapService () {
        // 选取地图容器
        var mapContainer = document.getElementById('map')
//        this.routeInstructionsContainer = document.getElementById('panel')
        // 地图配置：初始化与地图平台数据
        this.platform = new H.service.Platform({
          app_id: 'xDU8ZS8OLFy8aG8qzDKS',
          app_code: '7gaEA7LqoE9oFNnbyVFKTA'
        })
        //
        this.defaultLayers = this.platform.createDefaultLayers()
        //  初始化一张地图,设置中心点
        this.map = new H.Map(mapContainer,this.defaultLayers.normal.map)
        // 默认，实现泛/缩放。
        this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map))
        // 创建默认UI组件
        this.ui = H.ui.UI.createDefault( this.map, this.defaultLayers)
        // 创建地图
        this.mapFn(this.map)
      },
      /**
       * 百度地图
       */
      //加载百度地图静态文件
      baiduMap(){
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=SneO3d6UeaoVrAyDf84I0wub4Fd94GiU&callback=initialize";
        document.body.appendChild(script);
        var that=this;

        setTimeout(function () {
          that.baiduMapService()
        },500)
      },
      //创建地图实例
      baiduMapService () {
        this.map = new BMap.Map("map");
        // 创建地图实例
        this.mapFn(this.map)
        // var point = new BMap.Point(116.404, 39.915);
      },
      /**
       * 谷歌地图
       */
      //加载谷歌地图静态文件
      googleMap(){
        // var script = document.createElement("script");
        // script.src = "http://maps.google.cn/maps/api/js?key=AIzaSyBXa5IGr11xML0OumozehXsvEJ9Y7tTV4Q&language=zh-CN&sensor=TRUE_OR_FALSE";
        // document.body.appendChild(script);
        var that=this;
        setTimeout(function () {
          that.googleMapService()
        },2000)
      },
      //创建地图实例
      googleMapService () {
       this.mapFn()
        // var point = new BMap.Point(116.404, 39.915);
      },
      /** 绘画路径
       * Creates a H.map.Polyline from the shape of the route and adds it to the map.
       * @param {Object} route A route as received from the H.service.RoutingService
       */
      addRouteShapeToMap (route) {
        //herrd地图
        if(this.mapType=='here'){
          var lineString = new H.geo.LineString()
          // 从shape绘画路径
        // routeShape = route.shape,
          var routeShape = route
          var  polyline
          // 轮询解析坐标
          routeShape.forEach(function (point) {
            // var parts = point.split(',')
            // 路径坐标收集
            lineString.pushLatLngAlt(point.lat, point.lng)
          })
          // 创建完整路径
          polyline = new H.map.Polyline(lineString, {
            style: {
              lineWidth: 4,
              strokeColor: 'rgba(0, 128, 255, 0.7)'
            }
          })
          // 将路径添加到地图
          this.map.addObject(polyline)
          // And zoom to its bounding rectangle/自适应显示路径
          this.map.setViewBounds(polyline.getBounds(), true)
          this.addManueversToMap(route)
        }
        if(this.mapType == 'baidu'){
          var pois = [];
          for(let i in route){
            if(route[0]){
              var p = new BMap.Point(route[i].lng, route[i].lat)
              p.location=route[i].location
              pois.push(p)
            }
          }
          var that = this
          if(pois.length<=10){
            this.points[0]=pois
          }
          this.points = this.pointsBefore(pois,10);
          this.polylineList=[]
          console.log(this.points)
          setTimeout(function(){
            that.convertor = new BMap.Convertor();
            //递归控制
            that.myTransMore(1,5)
          }, 1000);
        }
        if(this.mapType == 'google'){
          var myTrip=[]
          for(let i in route){
            // var x = new google.maps.Projection(route[i].lat,route[i].lng)
            // consoel.log(x,'x')
            var p = new google.maps.LatLng(route[i].lat,route[i].lng);
            myTrip.push(p)
          }
          var flightPath=new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:6
          });
          flightPath.setMap(this.map);
          this.addManueversToMap(route)
        }
      },
      /** 创建地图点maneuver
       * Creates a series of H.map.Marker points from the route and adds them to the map.
       * @param {Object} route  A route as received from the H.service.RoutingService
       */
      addManueversToMap (route) {
        if(this.mapType=='here'){
          var svgMarkup = '<svg width="18" height="18" ' +
            'xmlns="http://www.w3.org/2000/svg">' +
            '<circle cx="8" cy="8" r="8" ' +
            'fill="#0077ff" stroke="white" stroke-width="1"  />' +
            '</svg>';
          var that = this
          var svgMarkup1 = '<img src="../../../static/img/icon/stra.png">',
            svgMarkup2 = '<img src="../../../static/img/icon/end.png">',
            dotIcon,
            group = new  H.map.Group()
          // 定义标注样式
          for (let i in route) {
            if(i==0){
              dotIcon = new H.map.Icon('../../../static/img/icon/stra.png',{anchor: {x:13, y: 11}})
            }else {
              if(i == route.length - 1 && i != 0){
                dotIcon = new H.map.Icon('../../../static/img/icon/end.png',{anchor: {x:15, y: 25}})
              }else {
                dotIcon = new H.map.Icon(svgMarkup, {anchor: {x: 8, y: 8}})
              }
            }
            // Add a marker to the maneuvers group 创建标注
            var marker = new H.map.Marker({lat: route[i].lat, lng: route[i].lng}, {icon: dotIcon})
            // 添加标注描述
            // marker.instruction = '第' + j + '个'
            marker.instruction = '<p style="font-size: 14px;text-align: left">当前:' + route[i].location + '</p>'
            marker.instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + route[i].ymd + route[i].hms + '</p>'
            // 将marker注入地图显示
            group.addObject(marker)
            if (i == route.length-1) {
//            that.map.setCenter({lat: route[i].lat, lng: route[i].lng})
              this.openBubble({lat: route[i].lat, lng: route[i].lng}, marker.instruction)
            }
          }
          // 添加事件监听
          group.addEventListener('tap', function (evt) {
            that.map.setCenter(evt.target.getPosition())
            // 生成弹框
            that.openBubble(
              evt.target.getPosition(), evt.target.instruction)
          }, false)
          // Add the maneuvers group to the map
          this.map.addObject(group)
        }
        if(this.mapType=='baidu') {
          // 点
          for (let i in route) {
            var pt = new BMap.Point(route[i].lng, route[i].lat);
            var  myIcon;
            if(i==0){
              myIcon = new BMap.Icon("../../../static/img/icon/stra.png", new BMap.Size(25,25));
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon = new BMap.Icon("../../../static/img/icon/end.png", new BMap.Size(30,40));
              }else {
                myIcon = new BMap.Icon("../../../static/img/icon/deft.png", new BMap.Size(15,15));
              }
            }
            var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            this.map.addOverlay(marker);
            var content = '<p style="font-size: 14px;text-align: left">当前:' + route[i].location; + '</p>';
            var opts = {
              width : 250,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title : "当前位置" , // 信息窗口标题
              enableMessage:true//设置允许信息窗发送短息
            };
            this.addClickHandler(content,marker,opts);
            if(i == route.length - 1 ){
              var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
              this.map.openInfoWindow(infoWindow, new BMap.Point(route[i].lng,route[i].lat));
            }// 将标注添加到地图中
            this.openBubble(route[i])
          }
          //弹框
        }
        if(this.mapType=='google'){
          for( let i in route){
            var myIcon  = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              // This marker is 20 pixels wide by 32 pixels high.
              //size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 20)
            };
            var myCenter=  new google.maps.LatLng(route[i].lat,route[i].lng);
            if(i==0){
              myIcon.url = "../../../static/img/icon/stra.png"
              myIcon.anchor= new google.maps.Point(13, 13)
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon.url = "../../../static/img/icon/end.png"
              }else {
                myIcon.url = "../../../static/img/icon/deft.png"
                myIcon.anchor= new google.maps.Point(8, 8)
              }
            }
            var marker=new google.maps.Marker({
              position:myCenter,
              icon:myIcon
            });
            marker.setMap(this.map);
            var that = this
            google.maps.event.addListener(marker,'click',function() {
              var marker = new google.maps.LatLng(route[i].lat,route[i].lng);
              var s =that.openBubble(route[i])
              s.setPosition(marker);
              s.open(that.map)
            });

           var T = this.openBubble(route[i])
           if( i == route.length-1){
             T.open(this.map,marker)
           }
          }
        }
      },
      // 标注弹框
      openBubble (position,text) {
        //here 地图
        if(this.mapType=='here'){
          if (!this.bubble) {
            // 没有新建
            this.bubble = new H.ui.InfoBubble(
              position,
              // The FO property holds the province name.弹框类容
              {content: text, style: 'color:#999'})
            // 再ui组件中添加弹框
            this.ui.addBubble(this.bubble)
          } else {
            // 从新赋值
            this.bubble.setPosition(position)
            this.bubble.setContent(text)
            // 从新打开，刷新数
            this.bubble.open()
          }
        }
        // 百度地图弹框
        if(this.mapType=='baidu'){
          //组合弹框和坐标


        }
        if(this.mapType=='google'){
          var content = '<p style="font-size: 14px;text-align: left;color:#000">当前:' + position.location; + '</p>';
          content += '<p style="font-size: 12px;text-align: left;color:#000">更新时间:' + position.ymd + position.hms + '</p>';
          if(!this.bubble){
            this.bubble = new google.maps.InfoWindow({
              content:content,
            });
          }else {
            this.bubble.setContent(content)
          }
          return  this.bubble
          }
        // 有无弹框
      },
      // 点击事件
      addClickHandler(content,marker,opts){
        var that=this
        marker.addEventListener("click",function(e){
            that.openInfo(content,opts,e)
        }
        );},
      // 弹框
      openInfo(content,opts,e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      },
      // 点开列表
      opentList () {
        var dom = document.getElementById('ul'),
          H = dom.scrollHeight,i=0,
          dom2 = document.getElementById('sty'),
          dom3 = document.getElementById('aimintUl'),
          str = ''
        // 判断是否ul收起
        if ( !this.clickStatus) {
          // 判断ul高度，给出超出隐藏
          if (H > 300) {
            dom3.style = 'height：300px;overflow-y:scroll'
            H = 300
          }
          // 加载动画
          str += '#bodyBox #aimintUl{ height:0px; animation: myA 1s forwards;  } @keyframes myA {0%{height: 0px;} 100%{height: '+ H +'px;}';
          str += '#aimintUl .listBoder{ height: '+ H +'px;}';
          dom2.innerHTML = str
          this.clickStatus = true
          // 区分语言 给出点击提示
            this.clickText = '点击收起'
          return false
        } else {
          // 收起状态
          var dom = document.getElementById('aimintUl'),
            dom2 = document.getElementById('sty')
          str+=''
          dom2.innerHTML = str
          this.clickStatus = false
          var le = this.ULlist.listCnut - 2
        }
      },
      // 查询
      // 点击地点切换弹框
      updateMap (list) {
        if(this.mapType=='here'){
          var instruction = '<p style="font-size: 14px;text-align: left">当前:' + list.location + '</p>'
          instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + list.ymd + list.hms + '</p>'
          this.map.setCenter({lat: list.lat, lng: list.lng})
          this.openBubble({lat: list.lat, lng: list.lng}, instruction)
        }
        if(this.mapType=='baidu'){
          var instruction = '<p style="font-size: 14px;text-align: left">当前:' + list.location + '</p>'
          instruction += '<p style="font-size: 12px;text-align: left">更新时间:' + list.ymd + list.hms + '</p>'
          var point = new BMap.Point(list.lng, list.lat);
          var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "当前位置" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
          };
          var infoWindow = new BMap.InfoWindow(instruction, opts);  // 创建信息窗口对象
          this.map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
        if(this.mapType=='google'){
          var marker = new google.maps.LatLng(list.lat,list.lng);
          var T = this.openBubble(list)
          T.setPosition(marker);
          T.open(this.map)
        }
      },
      // 查询
      sechlistFn () {
        var str = this.input
        this.$store.commit('transportListTo', null)
        if (!str) {  this.errorText = '请输入搜索关键字'; return }
        str = str.replace(/(^\s*)|(\s*$)/g, " ")
        if (!str) {
          this.errorText = '请输入搜索关键字'
          return
        }
        // 清空 vuex 列表
        var parm = {
          code: this.input
        }
        this.checkID(parm)
      },
      saechFn(a){
        var parm = {string:'string'}
        this.getIntroList(parm)
      },
      // 解析地图数据
      mapListDate (res) {
        res = res.body.data
        var pushList = []  // 经纬度地图列表
        var startTime = { ymd: '', hms: '' }
        var startPosition = this.citylist(res.startPosition)
          ,endPosition = this.citylist(res.endPosition)
        var chart = {
          startPosition:startPosition,
          endPosition:endPosition
        }
        // 基础信息
        this.dataChart = chart
        var ulList = {
          first: null, // 开始地址
          list: [],   // 中间地址
          last:  null, //  第二次地址
          listCnut: null
        } // 运输ul列表
        res = res.tracks
        var leng = res.length
        if (leng > 0) {
          for (let i in res) {
            var time = Public.publicLo.timeCheng(res[i].time)
            if( !res[i].location){
              if (this.languageCheak == 'Chinese') {
                res[i].location = 'No Data'
              }
              if (this.languageCheak == 'English') {
                res[i].location = 'No Data'
              }
            }
            var pu = {
              containerId: chart.containerId,
              transportStatus: chart.transportStatus,
              deviceNumber: chart.deviceNumber,
              lat: res[i].latitude, // 经度
              lng: res[i].longitude, // 纬度
              ymd: time.ymd,   // 日期
              hms: time.hms,   // 时间
              time: time.ymd + ' ' +  time.hms,
              location: res[i].location, // 地址信息
            }
            // if(this.mapType=='google'){
            //   console.log(pu.lat,'pu.lat')
            //   var lat_lng=this.wgs84togcj02(pu.lat,pu.lng)
            //   pu.lat=lat_lng[0]
            //   pu.lng=lat_lng[1]
            // }
            //
            if (i == 0) {
              // 导入第一条 ul显示数据
              ulList.first = pu
              ulList.last= {
                lat: null, // 经度
                lng: null, // 纬度
                ymd: null,   // 日期
                hms: null,   // 时间
                location: null // 地址信息
              } //  第二次地址
              // 创建地点中心图
              if(this.map){
                this.mapFn(this.map, pu)
              }
            }
            if (i >= leng - 1 && leng > 1) {
              // 导入最后一条ul的显示数据
              ulList.last = pu
              ulList.listCnut = leng
            }
            if (i > 0 && i < leng - 1) {
              // 导入最后ul中间的
              ulList.list.push(pu)
            }
            // 组装路径和标注点
            pushList.push(pu)
          }
          this.ULlist = ulList
          // 绘画轨迹
          if (pushList.length > 1) {
            this.addRouteShapeToMap(pushList)
          }
          // 绘画标注
         //this.addManueversToMap(pushList)
        }else {
          this.ULlist = {
            first: {
              lat: null, // 经度
                lng: null, // 纬度
                ymd: null,   // 日期
                hms: null,   // 时间
                location: null // 地址信息
            }, // 开始地址
            list: [],   // 中间地址
              last: {
              lat: null, // 经度
                lng: null, // 纬度
                ymd: null,   // 日期
                hms: null,   // 时间
                location: null // 地址信息
            }, //  第二次地址
            listCnut: null
          }
          if(this.mapType=='here'){
            this.mapFn(this.map)
          }
          if(this.mapType=='baidu') {
            this.baiduMap()
          }
          if(this.mapType=='google') {
            this.googleMap()
          }
        }
        // 判断中英文
          var le = this.ULlist.listCnut - 2
          this.clickText = '共 ' + le + ' 个位置'
      },
      citylist(res){
        var startPosition ={code:'',EN:'',CN:''}
        if(res.country){
          var country  = jsonData[res.country],
            city = {code:'',EN:'',CN:''}
          if(res.city){
            // 切割地址 分离国家城市
            var list = res.city.split('_');
            var sel = list[0]+'_'+list[1]
            // 注入国家id
            startPosition.code = res.city
            startPosition.CN = country[sel][startPosition.code].CN
            startPosition.EN = country[sel][startPosition.code].EN
          }else {
            startPosition.code = res.country
            startPosition.CN = country.CN
            startPosition.EN = country.EN
          }
        }
        return startPosition
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      //封装gsp点
      pointsBefore(data,max){
        var rel = [],//返回坐标集合
          times = parseInt(data.length/max),//计算出来多少组
          k=0 //标记循环data第几个
        for (let i=0;i<=times;i++){
          //第一维度
          rel[i]=[]
          for(let s=0;s<max;s++,k++ ){
            //过滤空数组
            if(data[k]){
              //组装数组
              rel[i][s]=data[k]
            }
          }
        }
        return rel
      },
      //递归集成
      myTransMore(typeTo,tyepFrom,){
        //标记次数
          this.convertor.translate(this.points[this.index], typeTo, tyepFrom, this.translateCallback)
      },
      // gps标转换百度坐标
      translateCallback(data){
          if(data.status === 0) { //坐标转换完之后的回调函数
            var list = []
           // 还原ul列表长度
            for(let i in this.points){
              list = list.concat(this.points[i])
            }

            // 匹配档次转换百度坐标
            for(let i in data.points){
              // 带入自定义位置信息
              var x = parseInt(this.index*10)+parseInt(i)

              data.points[i].location = list[x].location
              // 重新生成的百度坐标地址数组
              this.polylineList.push(data.points[i])
            }
            // 递归计数
            this.index++;
            // 递归执行
            if(this.index<this.points.length){
              this.myTransMore(1,5)
            }
            // 最后一组 跳出递归
            if(this.index==this.points.length-1){
              //生成轨迹
              console.log(this.polylineList,'list')
              var polyline = new BMap.Polyline(this.polylineList, {
                strokeWeight:'6',//折线的宽度，以像素为单位
                strokeColor:"rgb(0, 128, 255)" //折线颜色
              });
              console.log(polyline)
              this.map.addOverlay(polyline);
               //生成标记
              this.addManueversToMap(this.polylineList)
              // di
              for(let i in this.polylineList){
                if(i == 0){
                  // 抽取第一个
                  this.ULlist.first.lat =this.polylineList[i].lat
                  this.ULlist.first.lng = this.polylineList[i].lng
                }else  if(i != 0 && i== this.polylineList.length-1){
                  console.log(i)
                  this.ULlist.last.lat = this.polylineList[i].lat
                  this.ULlist.last.lng = this.polylineList[i].lng
                }else {
                  this.ULlist.list[i-1].lat = this.polylineList[i].lat
                  this.ULlist.list[i-1].lng = this.polylineList[i].lng
                }
              }
            }
          }
      },
      // 世界坐标 转莫尔卡投影
      mork(lng, lat) {//[114.32894, 30.585748]  
      var earthRad = 6378137.0;
      var x = lng * Math.PI / 180 * earthRad;
      var a = lat * Math.PI / 180;
      var y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      return [x, y]; //[12727039.383734727, 3579066.6894065146]  
      },
      //  gps标转换火星坐标
      wgs84togcj02(lng, lat) {
        var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
        var PI = 3.14159265358979324;
        var a = 6378245.0;
        var ee = 0.00669342162296594323;
        if (this.out_of_china == false){
           return  [lng, lat]
        }else {
          var dlat = this.transformlat(lng - 105.0, lat - 35.0,PI);
          var dlng = this.transformlng(lng - 105.0, lat - 35.0,PI);
          var radlat = lat / 180.0 * PI;
          var magic = Math.sin(radlat);
          magic = 1 - ee * magic * magic;
          var sqrtmagic = Math.sqrt(magic);
          dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
          dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
          var mglat = lat + dlat;
          var mglng = lng + dlng;
          return [mglng, mglat]
        }
      },
      // 判断是否在国内
      out_of_china(lat, lon) {
        if (lon < 72.004 || lon > 137.8347)
          return true;
        if (lat < 0.8293 || lat > 55.8271)
          return true;
        return false;
      },
      transformlat(lng, lat,PI) {
        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
        return ret
      },
      transformlng(lng, lat,PI) {
        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
        return ret
      },
      // 启动地图
      sev(){
        if(this.mapType=='here'){
          this.mapService()
        }
        if(this.mapType=='baidu'){
          this.baiduMap()
        }
        if(this.mapType=='google'){
          this.googleMap()
        }
      }
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      // 地图列表数据
      mapLi: function () {
        var parm = this.mapList
        if (parm) {
          // 解析计算地图列表
          var str = JSON.stringify(this.list2)
          var str2 = JSON.stringify(parm)
          if(str != str2){
            this.list2 = parm
            var string1 = JSON.stringify(this.fisrtList)
            var string2 = JSON.stringify(parm.body)
            var that =this
            if (string1 != string2) {
              if(this.map){
                this.mapListDate(parm)
              }else {
                 setTimeout(function () {
                   that.mapListDate(parm)
                 },2000)
              }
            }
          }
        }
        return 1
      },
      transport: function () {
        var parm = this.transportList || null
        if (parm) {
          if(parm.code == 1){
            this.errorText = '暂无此类订单'
           // this.openError(this.errorText)
          }
          if(parm.code == -1){
            this.errorText = '数据请求异常，请稍后重试'
           // this.openError(this.errorText)
          }
          if(parm.code == 0){
            this.errorText = null
            if(parm.body.data[1]){

            }else {
              var dat = {
                id: parm.body.data[0].id
              }
              this.mapListpost(dat)
            }
            if(!parm.body.data[0]){
              this.errorText = '暂无此类订单'
              this.openError(this.errorText)
            }
          }
          parm = 1
        }else {
          this.errorText = null
        }
        return parm
      },
      ...mapState([
        'mapList',
        'updateStatus',
        'language',
        'show',
        'transportList'
      ])
    },
    mounted () {
      this.sev()
      this.input = this.$route.query.id
      if (this.input) {
        var parm = {
          code: this.input
        }
        this.checkID(parm)
      }
    },
    components: {
      HeaderPublc: HeaderPublc,
      cent: cent,
      myfooter:myfooter
    }
  }
</script>

